import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import styles from './timeInterval.css';


const list = [
  {id:1, title:'周', morning:'上午', afternoon:'下午', night:'晚上'},
  {id:2, title:'一', morning:'m1', afternoon:'a1', night:'n1', checkM:false, checkA:false, checkN:false },
  {id:3, title:'二', morning:'m2', afternoon:'a2', night:'n2', checkM:false, checkA:false, checkN:false },
  {id:4, title:'三', morning:'m3', afternoon:'a3', night:'n3', checkM:false, checkA:false, checkN:false },
  {id:5, title:'四', morning:'m4', afternoon:'a4', night:'n4', checkM:false, checkA:false, checkN:false },
  {id:6, title:'五', morning:'m5', afternoon:'a5', night:'n5', checkM:false, checkA:false, checkN:false },
  {id:7, title:'六', morning:'m6', afternoon:'a6', night:'n6', checkM:false, checkA:false, checkN:false },
  {id:8, title:'七', morning:'m7', afternoon:'a7', night:'n7', checkM:false, checkA:false, checkN:false },
]

class TimeInterval extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      dataList:'',
      data: '',
    }
  }

  componentDidMount(){
    // console.log('defaultValue',defaultValue);
    // console.log('minDate',minDate);
    // console.log('maxDate',maxDate);
    this.setState({
      dataList:list ? list : [],
    })

  }

  clickMorning = (e, id, value) => {
    // console.log('click checked', e.target.checked);
    // console.log('click value', value);
    const checked = e.target.checked;
    let dataList = this.state.dataList;

    dataList.map((item, index) => {
      if(item.id == id){
        item.checkM = checked;
      }
    })
    this.setState({
      dataList,
    })

  }

  clickAfternoon = (e, id, value) => {
    const checked = e.target.checked;
    let dataList = this.state.dataList;

    dataList.map((item, index) => {
      if(item.id == id){
        item.checkA = checked;
      }
    })
    this.setState({
      dataList,
    })
  }

  clickNight = (e, id, value) => {
    const checked = e.target.checked;
    let dataList = this.state.dataList;

    dataList.map((item, index) => {
      if(item.id == id){
        item.checkN = checked;
      }
    })
    this.setState({
      dataList,
    })
  }

  showDayList = (list) =>{
    if(list && list.length > 0){
      return list.map((item, index) => (
        <div className={styles.item} key={item.id.toString()}>
          <div className={styles.title}>
            {item.title}
          </div>
          <div className={styles.morning}>
            {item.id == 1 ? item.morning : (
              <div>
                <input type="checkbox" id={`input_${item.morning}`}
                  className={styles.inputCheckBox}
                  onClick={(e) => this.clickMorning(e, item.id, item.morning)}
                  checked={item.checkM}
                />
                <label htmlFor={`input_${item.morning}`}></label>
              </div>
            )}
          </div>
          <div className={styles.afternoon}>
            {item.id == 1 ? item.afternoon : (
              <div>
                <input type="checkbox" id={`input_${item.afternoon}`}
                  className={styles.inputCheckBox}
                  onClick={(e) => this.clickAfternoon(e, item.id, item.afternoon)}
                  checked={item.checkA}
                />
                <label htmlFor={`input_${item.afternoon}`}></label>
              </div>
            )}
          </div>
          <div className={styles.night}>
            {item.id == 1 ? item.night : (
              <div>
                <input type="checkbox" id={`input_${item.night}`}
                  className={styles.inputCheckBox}
                  onClick={(e) => this.clickNight(e, item.id, item.night)}
                  checked={item.checkN}
                />
                <label htmlFor={`input_${item.night}`}></label>
              </div>
            )}
          </div>
        </div>
       ))
    }
  }

  render(){

    const { dataList } = this.state;

    return (
      <div className={styles.selectDateContent}>
        {this.showDayList(dataList)}
      </div>
    )
  }
}

const TimeIntervalWrapper = createForm()(TimeInterval);
export default TimeIntervalWrapper;
